import styled from 'styled-components'
import vmpAddImg from '@img/vmp-add.png'
import img from '@img/all.png'

export const StyledWrap = styled.div``

export const StyledView = styled.div<{ disabled?: boolean }>`
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 300px;
	border: 1px dashed #bababa;
	.vmp-list {
		position: relative;
		.vmp-list-item {
			position: relative;
			border: 1px solid #c3c3c3;
			box-sizing: border-box;
			&.active {
				border-color: ${(props) => (props.disabled ? '' : '#1e94da')};
			}
			.vmp-drop-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				font-size: 12px;
				color: #4e4e4e;
				user-select: none;
				cursor: ${(props) => (props.disabled ? '' : 'pointer')};
				.vmp-drag-item {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.operate {
					position: absolute;
					right: 0;
					top: 0;
					span {
						display: inline-block;
						width: 23px;
						height: 23px;
						background-image: url(${img});
						cursor: ${(props) => (props.disabled ? '' : 'pointer')};
						&.set {
							background-position: -92px -226px;
							&:hover {
								background-position: -115px -226px;
							}
						}
						&.delete {
							background-position: -184px -226px;
							&:hover {
								background-position: -207px -226px;
							}
						}
					}
				}
				.text {
					width: 100%;
					text-align: center;
					white-space: nowrap; /* 不换行 */
					overflow: hidden; /* 超出隐藏 */
					text-overflow: ellipsis; /* 超出展示省略号 */
				}
				.mode,
				.cur-mt {
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					text-align: center;
				}
			}
		}
		/** 1画面 */
		&.one {
			margin: 50px auto;
			width: 426px;
			height: 270px;
			.vmp-list-item {
				width: 100%;
				height: 100%;
			}
		}
		/** 2画面 */
		&.two_a {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 446px;
			height: 200px;
			.vmp-list-item {
				height: 160px;
				width: 220px;
			}
		}
		/** 2画面  一大一小 */
		&.two_b,
		&.two_c,
		&.two_d,
		&.two_e {
			width: 426px;
			height: 270px;
			.vmp-list-item:nth-child(1) {
				height: 270px;
				width: 426px;
			}
			.vmp-list-item:nth-child(2) {
				position: absolute;
				height: 100px;
				width: 160px;
			}
		}
		&.two_b {
			.vmp-list-item:nth-child(2) {
				bottom: 1px;
				right: 1px;
			}
		}
		&.two_c {
			.vmp-list-item:nth-child(2) {
				top: 1px;
				right: 1px;
			}
		}
		&.two_d {
			.vmp-list-item:nth-child(2) {
				top: 1px;
				left: 1px;
			}
		}
		&.two_e {
			.vmp-list-item:nth-child(2) {
				bottom: 1px;
				left: 1px;
			}
		}
		/*3画面*/
		&.three_a {
			height: 250px;
			width: 410px;
			.vmp-list-item {
				height: 120px;
				width: 200px;
				float: left;
				margin-top: 10px;
			}
			.vmp-list-item:nth-child(1) {
				float: none;
				margin: 0 auto;
			}
			.vmp-list-item:nth-child(2) {
				margin-right: 10px;
			}
		}
		&.three_b {
			height: 250px;
			width: 410px;
			.vmp-list-item {
				height: 120px;
				width: 200px;
				float: left;
			}
			.vmp-list-item:nth-child(1) {
				margin-top: 70px;
				margin-right: 10px;
			}
			.vmp-list-item:nth-child(2) {
				margin-bottom: 10px;
			}
		}
		&.three_c {
			height: 180px;
			width: 410px;
			.vmp-list-item {
				height: 85px;
				width: 129px;
				float: left;
			}
			.vmp-list-item:nth-child(1) {
				height: 180px;
				width: 270px;
				margin-right: 10px;
			}
			.vmp-list-item:nth-child(2) {
				margin-bottom: 10px;
			}
		}
		&.four_a {
			display: flex;
			justify-content: space-between;
			align-items: space-between;
			flex-wrap: wrap;
			height: 270px;
			width: 410px;
			.vmp-list-item {
				height: 130px;
				width: 200px;
			}
		}
		&.four_b {
			height: 288px;
			width: 390px;
			.vmp-list-item {
				width: 120px;
				height: 80px;
				float: left;
				margin: 10px 10px 0 0;
			}
			.vmp-list-item:nth-child(1) {
				height: 180px;
				width: 270px;
				float: none;
				margin-left: 55px;
			}
			.vmp-list-item:last-child {
				margin-left: 0;
			}
		}
		&.four_c {
			height: 270px;
			width: 400px;
			.vmp-list-item {
				width: 120px;
				height: 83px;
				float: left;
				margin-bottom: 6px;
			}
			.vmp-list-item:nth-child(1) {
				height: 180px;
				width: 270px;
				margin-top: 40px;
				margin-right: 10px;
			}
		}
		&.five_a {
			height: 235px;
			width: 433px;
			.vmp-list-item {
				float: left;
				height: 70px;
				width: 100px;
				margin-right: 6px;
				margin-top: 14px;
			}
			.vmp-list-item:nth-child(1) {
				height: 150px;
				width: 220px;
				margin: 0 102px;
			}
		}
		&.five_b {
			height: 290px;
			width: 455px;
			.vmp-list-item {
				float: left;
				height: 65px;
				width: 100px;
				margin-left: 10px;
				margin-top: 5px;
			}
			.vmp-list-item:nth-child(1) {
				height: 275px;
				width: 320px;
			}
		}
		&.six_a {
			height: 290px;
			width: 425px;
			.vmp-list-item {
				float: left;
				height: 85px;
				margin: 5px;
				width: 129px;
			}
			.vmp-list-item:nth-child(1) {
				height: 180px;
				width: 268px;
			}
		}
		&.six_b {
			height: 274px;
			width: 440px;
			.vmp-list-item {
				float: left;
				height: 50px;
				margin: 2px;
				width: 84px;
			}
			.vmp-list-item:nth-child(1) {
				height: 266px;
				width: 340px;
			}
		}
		&.seven {
			height: 280px;
			width: 429px;
			.vmp-list-item {
				float: left;
				height: 65px;
				margin: 2px;
				width: 101px;
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2),
			.vmp-list-item:nth-child(3) {
				height: 135px;
				width: 206px;
			}
		}
		&.eight {
			width: 429px;
			.vmp-list-item {
				float: left;
				height: 65px;
				margin: 2px;
				width: 100px;
			}
			.vmp-list-item:nth-child(1) {
				height: 203px;
				width: 308px;
			}
		}
		&.nine {
			width: 433px;
			.vmp-list-item {
				float: left;
				height: 90px;
				margin: 2px;
				width: 140px;
			}
		}
		&.ten {
			width: 429px;
			.vmp-list-item {
				float: left;
				height: 65px;
				width: 100px;
				margin: 2px;
			}
			.vmp-list-item:nth-child(5),
			.vmp-list-item:nth-child(6) {
				height: 135px;
				width: 204px;
			}
		}
		&.eleven_a {
			width: 480px;
			.vmp-list-item {
				float: left;
				height: 65px;
				margin: 2px;
				width: 90px;
			}
			.vmp-list-item:nth-child(1) {
				height: 130px;
				margin: 0 117px 3px;
				width: 240px;
			}
		}
		&.eleven_b {
			width: 480px;
			.vmp-list-item {
				float: left;
				height: 60px;
				width: 110px;
				margin: 5px;
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2),
			.vmp-list-item:nth-child(3) {
				height: 90px;
				width: 150px;
			}
		}
		&.twelve_a {
			width: 429px;
			.vmp-list-item {
				float: left;
				height: 44px;
				margin: 1px;
				width: 65px;
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2),
			.vmp-list-item:nth-child(3) {
				height: 136px;
				width: 200px;
			}
		}
		&.twelve_b {
			width: 445px;
			.vmp-list-item {
				float: left;
				height: 65px;
				margin: 2px;
				width: 85px;
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2) {
				height: 126px;
				width: 218px;
			}
		}
		&.thirteen {
			width: 388px;
			.vmp-list-item {
				float: left;
				height: 68px;
				margin: 2px;
				width: 90px;
			}
			.vmp-list-item:nth-child(7) {
				height: 140px;
				width: 186px;
			}
			.vmp-list-item:nth-child(6) {
				position: absolute;
				left: 0;
				top: 144px;
			}
		}
		&.fourteen {
			width: 460px;
			.vmp-list-item {
				float: left;
				height: 59px;
				margin: 2px;
				width: 88px;
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2) {
				height: 122px;
				width: 180px;
			}
		}
		&.fifteen_a {
			width: 450px;
			.vmp-list-item {
				float: left;
				height: 55px;
				margin: 2px;
				width: 71px;
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2),
			.vmp-list-item:nth-child(3) {
				height: 100px;
				margin-left: 3px;
				width: 145px;
			}
		}
		&.fifteen_b {
			width: 468px;
			.vmp-list-item {
				float: left;
				height: 50px;
				margin: 2px;
				width: 74px;
			}
			.vmp-list-item:nth-child(1) {
				height: 212px;
				margin-left: 3px;
				width: 307px;
			}
		}
		&.sixteen {
			width: 438px;
			.vmp-list-item {
				float: left;
				height: 65px;
				margin: 2px;
				width: 105px;
			}
		}
		&.seventeen {
			width: 436px;
			.vmp-list-item {
				float: left;
				height: 55px;
				margin: 1px;
				width: 85px;
			}
			.vmp-list-item:nth-child(1) {
				height: 169px;
				width: 259px;
			}
		}
		&.eighteen {
			width: 462px;
			.vmp-list-item {
				float: left;
				height: 60px;
				margin: 1px;
				width: 75px;
			}
			.vmp-list-item:nth-child(7),
			.vmp-list-item:nth-child(8),
			.vmp-list-item:nth-child(9),
			.vmp-list-item:nth-child(10),
			.vmp-list-item:nth-child(11),
			.vmp-list-item:nth-child(12) {
				height: 80px;
				margin-right: 1px;
				width: 152px;
			}
		}
		&.nineteen {
			width: 450px;
			.vmp-list-item {
				float: left;
				height: 52px;
				margin: 2px;
				width: 85px;
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2) {
				height: 108px;
				width: 174px;
			}
		}
		&.twenty {
			width: 410px;
			.vmp-list-item {
				float: left;
				height: 50px;
				margin: 2px;
				width: 64px;
			}
			.vmp-list-item:nth-child(1),
			.vmp-list-item:nth-child(2) {
				height: 110px;
				width: 200px;
			}
		}
		&.twenty_one {
			width: 433px;
			.vmp-list-item {
				float: left;
				height: 43px;
				margin: 2px;
				width: 68px;
			}
			.vmp-list-item:nth-child(8),
			.vmp-list-item:nth-child(9),
			.vmp-list-item:nth-child(10) {
				position: absolute;
				left: 0;
				top: 94px;
			}
			.vmp-list-item:nth-child(9) {
				top: 141px;
			}
			.vmp-list-item:nth-child(10) {
				top: 188px;
			}
			.vmp-list-item:nth-child(11) {
				height: 184px;
				width: 284px;
			}
		}
		&.twenty_two {
			width: 450px;
			.vmp-list-item {
				float: left;
				height: 50px;
				margin: 1px;
				width: 88px;
			}
			.vmp-list-item:nth-child(1) {
				height: 101px;
				width: 178px;
			}
		}
		&.twenty_four {
			width: 436px;
			.vmp-list-item {
				float: left;
				height: 43px;
				margin: 2px;
				width: 68px;
			}
			.vmp-list-item:nth-child(8),
			.vmp-list-item:nth-child(14) {
				position: absolute;
				left: 0;
				top: 94px;
			}
			.vmp-list-item:nth-child(14) {
				top: 188px;
			}
			.vmp-list-item:nth-child(9),
			.vmp-list-item:nth-child(10),
			.vmp-list-item:nth-child(15),
			.vmp-list-item:nth-child(16) {
				height: 90px;
				width: 140px;
			}
		}
		&.twenty_five {
			width: 460px;
			.vmp-list-item {
				float: left;
				height: 53px;
				margin: 2px;
				width: 88px;
			}
		}
	}
`
export const StyledPopup = styled.div`
	background: #fff;
	border: 1px solid #ccc;
	padding: 8px 0;
	width: 170px;
	.item-line {
		border-bottom: 1px solid #ccc;
		cursor: default;
		display: block;
		font-size: 0;
		height: 1px;
		margin: 2px 5px;
		padding: 0;
		width: 160px;
	}
	.rc_box-menu {
		position: relative;
		padding-left: 30px;
		color: #4e4e4e;
		font-size: 12px;
		height: 30px;
		line-height: 30px;
		text-align: left;
		width: 100%;
		cursor: pointer;
		.select-icon {
			display: inline-block;
			height: 7px;
			width: 10px;
			position: absolute;
			left: 12px;
			top: 11px;
			background-image: url(${img});
			background-position: 0px -654px;
		}
		&:hover {
			background: #1e94da;
			color: #ffffff;
			width: auto;
			.select-icon {
				background-position: -10px -654px;
			}
		}
	}
`
export const AddIcon = styled.div`
	width: 17px;
	height: 17px;
	background: url(${vmpAddImg}) no-repeat;
`
export const ListItemGhost2 = styled.div`
	height: 30px;
	background: linear-gradient(90deg, #2d8bc0, #53afe4);
	color: #ffffff;
	line-height: 30px;
	padding-left: 10px';
`
